// 等待DOM树构建完成,执行函数内的代码
// document.addEventListener('DOMContentLoaded',function(){})
document.addEventListener('DOMContentLoaded', function(){
    // console.log(document.querySelector('.game-box'))
    // 需求1: 获取到第0个格子,添加数字2
    // document.querySelector('.game-cell-0-0').innerText = 2
    // 需求2: 获取到所有格子,添加数字2
    // for(let idx = 0; idx < 16; idx++){
    //     let hang = parseInt(idx / 4)
    //     let lie = idx % 4
    //     document.querySelector(`.game-cell-${hang}-${lie}`).innerText = 2
    // }
    // 需求2: 获取到所有格子,添加不同的数字
    // let cellArr = [
    //     0, 0, 0, 0,
    //     0, 0, 0, 0,
    //     0, 0, 0, 0,
    //     0, 0, 0, 0
    // ]
    // 需求3: 任意一个位置,出现数字2或4(一样的概率)
    // let randomIdx = parseInt(Math.random() * cellArr.length)
    // if(Math.random() < 0.5){
    //     cellArr[randomIdx] = 2
    // } else {
    //     cellArr[randomIdx] = 4
    // } 
    // render()


   
    let cellArr
    newGame() // 默认一进入页面,就开启新游戏
    // 需求5: 点击按钮时,重新开始游戏
    document.querySelector('.restart-btn').onclick = newGame
    // 开始游戏的函数
    function newGame(){
        cellArr = [
            0, 0, 0, 0,
            0, 0, 0, 0,
            0, 0, 0, 0,
            0, 0, 0, 0
        ]
        // 需求4: 任意两个位置, 出现数字2或4(一样的概率)
        generateNum()
        generateNum()
        render()
    }

    // 生成数字的函数
    function generateNum(){
        let randomIdx
        do{
            randomIdx = parseInt(Math.random() * cellArr.length)
        } while(cellArr[randomIdx] > 0)
        // let randomIdx = parseInt(Math.random() * cellArr.length)
        // while(cellArr[randomIdx] > 0){
        //     randomIdx = parseInt(Math.random() * cellArr.length)
        // }
        if(Math.random() < 0.5){
            cellArr[randomIdx] = 2
        } else {
            cellArr[randomIdx] = 4
        } 
    }

    // 渲染函数:将数组中的每一项数据都渲染到页面上
    function render(){
        for(let idx = 0; idx < cellArr.length; idx++){
            let hang = parseInt(idx / 4)
            let lie = idx % 4
            if(cellArr[idx] === 0){
                document.querySelector(`.game-cell-${hang}-${lie}`).innerText = ''
            } else {
                document.querySelector(`.game-cell-${hang}-${lie}`).innerText = cellArr[idx]
            }
        }
    }
    







})




